<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="css/base.css" rel="stylesheet" type="text/css">
    <link href="fonts/iconfont.css" rel="stylesheet" type="text/css">
    <link href="less/index.css" rel="stylesheet" type="text/css">

    <script src="js/jquery.min.js"></script>
    <script src="js/rem.js"></script>

</head>

<body>
    <div class="layout clearfix">
        <!-- 头部固定搜索栏 -->
        <header>
            <a href="javascript:;">
                <p class="iconfont icon-address"></p>
                <p>武汉</p>
            </a>
            <form class="iconfont icon-sousuo">
                <input type="text" placeholder="输入商家、商品或分类">
            </form>
            <a href="javascript:;">
                <p class="iconfont icon-saoyisao"></p>
                <p>扫一扫</p>
            </a>
        </header>

        <!-- 商家分类 -->
        <nav>
            <div class="nav_title">
                <i class="iconfont icon-shangjia"></i>
                <span>商家分类</span>
            </div>
            <div class="nav_body">
                <ul class="clearfix">
                    <li>
                        <a href="javascript:;">
                            <img src="images/r1.jpg" alt="">
                            <p>电脑产品</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="images/r2.jpg" alt="">
                            <p>手机产品</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="images/r3.jpg" alt="">
                            <p>原料类</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="images/r4.jpg" alt="">
                            <p>加工类</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="images/r5.jpg" alt="">
                            <p>复合类</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="images/r6.jpg" alt="">
                            <p>面料类</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="images/r7.jpg" alt="">
                            <p>印花类</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="images/r8.jpg" alt="">
                            <p>磨毛类</p>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="nav_point">
                <ul class="clearfix">
                    <li class="active"></li>
                    <li></li>
                </ul>
            </div>
        </nav>

        <!-- 特推商品/商品列表 -->
        <main>
            <div class="main_title">
                <i class="iconfont icon-remen"></i>
                <span>特推商品</span>
                <span class="main_check">查看全部 <i class="iconfont icon-goto"></i></span>
            </div>
            <div class="main_body">
                <ul>
                    <li>
                        <img src="images/p1.jpg" alt="">
                        <div class="main_mid">
                            <h5>J21-预见V9 NO.254322</h5>
                            <p>游戏机箱 较为时尚的外观<br>吸入式光驱设计
                            </p>
                        </div>
                        <div class="main_right">
                            <p>¥ 599</p>
                            <p>1.7km</p>
                        </div>
                    </li>
                    <li>
                        <img src="images/p1.jpg" alt="">
                        <div class="main_mid">
                            <h5>J21-预见V9 NO.254322</h5>
                            <p>游戏机箱 较为时尚的外观<br>吸入式光驱设计
                            </p>
                        </div>
                        <div class="main_right">
                            <p>¥ 599</p>
                            <p>1.7km</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="main_title">
                <i class="iconfont icon-fenlei1"></i>
                <span>商品列表</span>
                <span class="main_check">查看全部 <i class="iconfont icon-goto"></i></span>
            </div>
            <div class="main_body">
                <ul>
                    <li>
                        <img src="images/p1.jpg" alt="">
                        <div class="main_mid">
                            <h5>J21-预见V9 NO.254322</h5>
                            <p>游戏机箱 较为时尚的外观<br>吸入式光驱设计
                            </p>
                        </div>
                        <div class="main_right">
                            <p>¥ 599</p>
                            <p>1.7km</p>
                        </div>
                    </li>
                    <li>
                        <img src="images/p1.jpg" alt="">
                        <div class="main_mid">
                            <h5>J21-预见V9 NO.254322</h5>
                            <p>游戏机箱 较为时尚的外观<br>吸入式光驱设计
                            </p>
                        </div>
                        <div class="main_right">
                            <p>¥ 599</p>
                            <p>1.7km</p>
                        </div>
                    </li>
                </ul>
            </div>
        </main>

        <!-- 底部固定导航 -->
        <footer>
            <ul>
                <li class="active">
                    <a href="javascript:;">
                        <p class="iconfont icon-shouye"></p>
                        <p>首页</p>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <p class="iconfont icon-shangjia1"></p>
                        <p>商家</p>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <p class="iconfont icon-wode"></p>
                        <p>我的</p>
                    </a>
                </li>
            </ul>
        </footer>
    </div>
</body>

</html>